/**
 * 封装的自定义指令
 * 主要是封装防抖节流，然后在组件内部绑定事件（如点击事件）的时候就能直接用封装好了的
 */

 
// 防抖指令封装 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
export const useDebounceDirective = (delay) => {
  return {
    beforeMount(el, binding) {
      let timer;
      el.addEventListener(binding.arg, () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          binding.value();
        }, delay);
      });
    }
  };
};
 
// 节流指令封装  当持续触发事件时，第一次执行，一定时间段内如果再次调用该事件则不触发。
export const useThrottleDirective = (delay) => {
  return {
    beforeMount(el, binding) {
      let lastTime = 0
      el.addEventListener(binding.arg, () => {
        // 2.1.获取当前事件触发时的时间
        const nowTime = new Date().getTime()
        // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        const remainTime = delay - (nowTime - lastTime)
        if (remainTime <= 0) {
          binding.value();
          lastTime = nowTime
        }
      });
    }
  };
};